iT邦幫忙

2024 iThome 鐵人賽

DAY 3
0

HTML 標題標籤:
提供了六個標題標籤,從 <h1> 到 <h6>,用來定義不同層級的標題。標題的層級從大到小依次遞減,其中 <h1> 是最重要的標題,<h6>是最次要的。
下圖是程式碼及網頁所呈現的畫面:
https://ithelp.ithome.com.tw/upload/images/20240916/20169395ZWtS3UIu12.png
段落標籤:
<p>用於定義段落,它是一個塊級元素,會自動在段落前後添加空白間距。
下圖是程式碼及網頁所呈現的畫面:
https://ithelp.ithome.com.tw/upload/images/20240916/20169395fHUNbk5Cm3.png
行內元素:
不會在元素前後自動添加換行或空白間距,適合嵌入在段落或其他文本中的元素。常見的行內元素包括:

  • <strong>:加粗文本,強調重要性。
  • <em>:斜體文本,用於語氣的強調。
  • <br>:強制換行符,用來在文本中插入換行。
  • <a>:超鏈接元素,用來創建可點擊的鏈接。
  • <span>:通用的行內容器,用於應用樣式或操作某一部分文本。
    下圖是程式碼及網頁所呈現的畫面:
    https://ithelp.ithome.com.tw/upload/images/20240916/201693952AqIFKLHqn.png
    特殊文本標籤:
    HTML 也提供了一些專門用於格式化特殊類型文本的標籤,如下:
  • <blockquote>:用於表示長引用的塊級元素,通常會縮進顯示。
  • <q>:用於表示行內的簡短引用,會自動在文本前後添加引號。
  • <code>:用於顯示代碼片段的行內元素,通常使用等寬字體顯示。
  • <pre>:用於顯示預格式化文本,保留空格和換行。
  • <small>:用來顯示小號文字,通常用於附註或聲明。
  • <del>:顯示被刪除的文本,通常以刪除線呈現。
  • <ins>:顯示被插入的文本,通常以下劃線呈現。
    下圖是程式碼及網頁所呈現的畫面:
    https://ithelp.ithome.com.tw/upload/images/20240916/20169395H4iMbp1AIK.png
    實作:創建一個格式化的文章
    程式碼:
    https://ithelp.ithome.com.tw/upload/images/20240916/20169395llnStpJIhv.png
    網頁會呈現下圖:
    https://ithelp.ithome.com.tw/upload/images/20240916/20169395vyjl9Kppyx.png
    結語:
    今天學會了HTML 中用於文本格式化的各種標籤,包括標題、段落、行內元素、引用、代碼顯示等。儘管還沒有那麼熟悉,但熟能生巧總有一天我一定可以完全掌握!

上一篇
DAY 2:HTML 元素與屬性
下一篇
DAY 4:列表和表格
系列文
前端基礎:HTML 和 CSS 的 30 天學習之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言